<template>
    <page-layout>
        <template v-slot:header>
            <el-input v-model="query.name" placeholder="输入样品名称查询" size='small' />
            <el-button type='primary' size='small' @click="queryEvt">查询</el-button>
            <el-button type='success' size='small' @click="addEvt">新增</el-button>
        </template>

        <el-table :data="tableData" style="width: 100%" height="100%" size='small'>
            <el-table-column prop="name" label="样品名称" width="180" />
            <el-table-column prop="brand" label="品牌" width="180" />
            <el-table-column prop="type" label="类型" width="180" />
            <el-table-column prop="unit" label="单位" width="180" />
            <el-table-column prop="place" label="产地" show-overflow-tooltip width="180" />
            <el-table-column label="操作" width="160" fixed="right" align="center">
                <template slot-scope="{ row }">
                    <el-button type="text" size="small" @click="eaitEvt(row)">编辑</el-button>
                    <el-button type="text" @click="detailEvt(row)" size="small">详情</el-button>
                    <el-button type="text" size="small" @click="deleteEvt(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <template v-slot:footer>
            <el-pagination :page-sizes="[20, 50, 100, 150]" :page-size="query.size" :current-page="query.page"
                @size-change="sizeChange" @current-change="currentChange"
                layout="total, sizes, prev, pager, next, jumper" :total="total" />
        </template>
        <p>{{ IMGURL }}</p>
    </page-layout>
</template>

<script>
import { IMGURL } from '@/config/sample.conf'
import { sampleDeleteApi, sampleListApi } from '../../../../apis/sampleApi'
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            query: {
                page: 1,
                size: 20,
                name: ''
            },
            changeTimer: null,
        }
    },
    mounted() {
        this.getList()
    },

    methods: {
        // 删除事件
        deleteEvt({ id, name }) {
            this.$confirm(
                `确定要删除【${name}】产品信息，删除后不可以恢复，确定要删除？`,
                '删除确认',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }
            ).then(async () => {
                let result = await sampleDeleteApi(id)
                if (result.code !== 200) {
                    this.$message.error('删除失败，原因：' + result.message)
                    return
                }
                this.$message.success('删除成功')
                setTimeout(()=>{
                    this.$router.go(0)
                })
            }).catch(() => {
                this.$message.success('取消成功')
            })
        },
        eaitEvt(data) {
            this.$router.push({
                path: '/product/sample/edit',
                query: data
            })
        },
        // 根据新的条件进行查询，那么必须从第一页开始查询
        async queryEvt() {
            this.query.page = 1
            this.getList()
        },
        // 获取列表数据的方法
        async getList() {
            let result = await sampleListApi(this.query)
            console.log(result)
            if (result.code === 200) {
                this.tableData = result.data.rows
                this.total = result.data.count
            }
        },
        sizeChange(size) {
            this.query.size = size
            if (this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer = setTimeout(() => {
                this.getList()
            }, 100)
        },
        currentChange(page) {
            this.query.page = page
            if (this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer = setTimeout(() => {
                this.getList()
            }, 100)
        },
        detailEvt(data) {
            this.$router.push({
                path: '/product/sample/detail',
                query: data
            })
        },
        addEvt() {
            this.$router.push('/product/sample/edit')
        }
    }
}
</script>

<style lang="less" scoped>
.product-state {
    color: #999;

    &::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 6px;
        height: 6px;
        border-radius: 6px;
        background: #999;
        margin-right: 6px;
    }

    &.sale {
        color: #409EFF;

        &::before {
            background: #409EFF;
        }
    }

    &.new {
        color: #85ce61;

        &::before {
            background: #85ce61;
        }
    }
}
</style>
